<template>
        <swiper :options="swiperOption" v-if="showswiper" >
            <!-- slides -->
            <swiper-slide v-for="item of swiper" :key="item.id">
                <img class='swiper-img' :src="item.imgUrl" />
            </swiper-slide>
            <!-- Optional controls -->
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
    
</template>
<script>
export default {
    name :'HomeSwiper',
    props:{
        swiper:Array
    },
    data() {
        return {
           swiperOption:{
               pagination:'.swiper-pagination',
               loop:true,
               speed :2000,
               autoplay :{
                    delay: 1000, //自动切换的时间间隔，单位ms                  
                    stopOnLastSlide: false, //当切换到最后一个slide时停止自动切换
                    stopOnLastSlide: true, //如果设置为true，当切换到最后一个slide时停止自动切换。
                    disableOnInteraction: false, //用户操作swiper之后，是否禁止autoplay。
                    reverseDirection: true, //开启反向自动轮播。
                    waitForTransition: true, //等待过渡完毕。自动切换会在slide过渡完毕后才开始计时。
                }
           },
        }
    },
    computed:{
        showswiper(){
            return this.swiper.length
        }
    }
}
</script>
<style lang='stylus' scoped>
    >>> .swiper-pagination-bullet-active
            background : #fff !important
        .swiper-img
            width :100%
    
</style>
